export default class Item extends React.Component {
  
  getInfoDom = (data) => {
    let infoDom = null;
    switch(data.type) {
      case('handledWfInfo'):
      case('overtimeWfInfo'):
      case('createInfo'): {
        let isRaise = true;
        if(data.changePercent.indexOf('-') > -1) {
          isRaise = false;
        }
        infoDom = (
          <div>
            <p>{data.title}</p>
            <p className='number'>{data.showcount}</p>
            <p className='footer-wd'>
              <span>
                <i className={isRaise ? "icon-coms-organization-down needRotate": 'icon-coms-organization-down'}/>
                <span className='ratio'>{data.changePercent}</span> {data.compareTo}
              </span>
             <p>{data.rank}</p>
            </p>
          </div>
        )
      }; break;
      case('doingWfInfo'): {
        infoDom = (
          <div>
            <p>{data.title}</p>
            <p className='number'>{data.showcount}</p>
            <p className='footer-wd'>{data.retentionAvg}</p>
          </div>
        )
      }; break;
    }
    return infoDom
  }
  render() {
    const { data } = this.props;
    let content = this.getInfoDom(data);
    return (
      <div className='all-ele-item'>
        <div className='all-ele-item-content'> 
          <div className='left-pic'>
            <img src={data.imgSrc}></img>
          </div>
          <div className='right-info'>
            {content}
          </div>
        </div>
      </div>
    )
  }
}